<!doctype html>
<head>
    <title>Threebox Basic Example</title>
    <script src="../dist/threebox.js" type="text/javascript"></script>
    <!--<script src="config.js"></script>-->

    <link rel="stylesheet" href="http://minedata.cn/minemapapi/v1.2/minemap.css">
    <script src="http://minedata.cn/minemapapi/v1.2/minemap.js"></script>
    <style>
        body, html { 
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #map { 
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id='map' class='map'></div>

    <script>
        minemap.accessToken = '0b871b483cfb42a7b0dd73b5f78792e8';
        minemap.solution = 66;
        var map = new minemap.Map({
            container: 'map',
            style: 'http://minedata.cn/service/solu/style/id/66',
            center: [116.4340, 39.7353],
            zoom: 15.95,
            pitch: 60,
            heading: 41,
            maxZoom: 24
        });

    map.on("load", function() {
        // Initialize threebox
        window.threebox = new Threebox(map);
        threebox.setupDefaultLights();


        // Load and manipulate a THREE.js scenegraph as you would normally
        loader = new THREE.JSONLoader();

        loader.load("models/boeing747-400-jw.json", function(geometry) {
            geometry.rotateY((90/360)*2*Math.PI);
            geometry.rotateX((90/360)*2*Math.PI);

            var material = new THREE.MeshPhongMaterial( {color: 0xaaaaff, side: THREE.DoubleSide}); 
            aircraft = new THREE.Mesh( geometry, material );
            var planePosition = [116.41356, 39.77577 ,100];

            // Add the model to the threebox scenegraph at a specific geographic coordinate
            threebox.addAtCoordinate(aircraft, planePosition, {scaleToLatitude: true, preScale: 2});
        });

    });


    </script>
</body>